<div>
  <hot-table
    class="hot"
    [data]="dataset"
    height="450"
    [colWidths]="[140, 192, 100, 90, 90, 110, 97, 100, 126]"
    [afterGetColHeader]="alignHeaders"
    [colHeaders]="colHeaders"
    [rowHeaders]="true"
    [dropdownMenu]="true"
    [hiddenColumns]="hiddenColumns"
    [contextMenu]="true"
    [multiColumnSorting]="true"
    [filters]="true"
    [afterOnCellMouseDown]="changeCheckboxCell"
    [afterGetColHeader]="alignHeaders"
    [afterGetRowHeader]="drawCheckboxInRowHeaders"
    [beforeRenderer]="addClassesToRows"
    licenseKey="non-commercial-and-evaluation"
  >
    <hot-column data="1"></hot-column>
    <hot-column data="3"></hot-column>
    <hot-column data="4" type="date" [allowInvalid]="false"></hot-column>
    <hot-column data="6" type="checkbox" className="htCenter"></hot-column>
    <hot-column data="7" type="numeric"></hot-column>
    <hot-column
      data="8"
      [renderer]="progressBarRenderer"
      [readOnly]="true"
      className="htMiddle"
    ></hot-column>
    <hot-column
      data="9"
      [renderer]="starsRenderer"
      [readOnly]="true"
      className="star htCenter"
    ></hot-column>
    <hot-column data="5"></hot-column>
    <hot-column data="2"></hot-column>
  </hot-table>
</div>
